import {StyleSheet, View} from 'react-native';
import ImageViewer from "./components/ImageViewer";
import * as ImagePicker from "expo-image-picker";
import Button from './components/Button';
import {useState} from "react";
import OptionView from './components/OptionView'

const PlaceholderImage = require('./assets/images/background-image.png');
export default function App() {
    const [showAppOptions, setShowAppOptions] = useState(false);
    const [selectedImage, setSelectedImage] = useState(null);
    return (
        <View style={styles.container}>
            <View style={styles.imageContainer}><ImageViewer placeholderImage={PlaceholderImage}
                                                             selectedImage={selectedImage}/></View>
            {showAppOptions
                ? (<OptionView/>)
                : <View style={styles.footerContainer}>
                    <Button label="选择图片" theme="primary" onPress={pickImageAsync}/>
                    <Button label="使用图片" onPress={() => setShowAppOptions(true)}/>
                </View>
            }
        </View>
    )

    async function pickImageAsync() {
        let result = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: true, quality: 1
        })
        if (!result.canceled) {
            setSelectedImage({uri: result.assets[0].uri});
        } else {
            alert("未选择图片");
        }
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#25292e',
        alignItems: 'center',
        justifyContent: 'center',
    },
    imageContainer: {
        flex: 1,
        paddingTop: 58
    },
    footerContainer: {
        flex: 1 / 3,
    }
});
